<template>
  <!-- 问题页面 -->
  <div class="question w80 mg0auto" v-if="state.showType === 'answer'">
    <QuestionAnswer
      v-for="(item, index) in state.questionList"
      :key="index"
      :msg="item"
      @answer-all="fnAnswers"
    />
    <div class="w100">
      <Button @click="fnSubmitAnswer" :msg="{ text: '提交' }" />
      <span>{{ state.answers }}</span>
    </div>
  </div>
  <div class="question w80 mg0auto" v-else-if="state.showType === 'view'">
    <QuestionDetails
      v-for="(item, index) in state.questionList"
      :key="index"
      :msg="item"
      @answer-all="fnAnswers"
    />
  </div>
  <div v-else-if="state.showType === 'question'">试卷首页，推荐</div>
</template>

<script>
// vue 基础
import { defineProps, reactive } from "vue";
// 题目组件
import QuestionAnswer from "../components/Box/QuestionAnswer/QuestionAnswer.vue";
import QuestionDetails from "../components/Box/QuestionAnswer/QuestionDetails.vue";
import Button from "../components/Button/Button.vue";
import { post_ } from "/@/http/api.js";

export default {
  components: {
    QuestionAnswer,
    Button,
    QuestionDetails,
  },
  props: {
    msg: String,
  },
  setup(props) {
    // 双向绑定数据
    const state = reactive({
      answers: {}, // 答案结果集
      questionList: [],
      showType: "question",
    });
    // 接收子组件的值
    const fnAnswers = (val) => {
      state.answers = Object.assign(state.answers, val);
    };
    // 提交按钮
    const fnSubmitAnswer = () => {
      // Object.keys(state.answers).forEach(function (key) {
      //   console.log(key, state.answers[key]);
      // });
      post_("api/upDateAnswer", {
        ...state.answers,
      })
        .then(() => {
          state.answers = {};
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(state.answers);
    };
    // 试卷问题查询
    const fnGetPaperDetail = (id, paper) => {
      post_("api/pub/paperDetail", {
        id: id,
        testPaper: paper,
      }).then((res) => {
        let data = [
          {
            type: "3",
            questionDescribe: { size: "fs16", text: "请选择正确的答案" },
            questinoType: { text: "单选题", weight: "fw500" },
            questionItem: [],
          },
          {
            type: "2",
            questionDescribe: {
              size: "fs16",
              text: "以下题目的正确答案包含多个选项",
            },
            questinoType: {
              text: "多选题",
              weight: "fw500",
            },
            questionItem: [],
          },
          {
            type: "1",
            questionDescribe: { size: "fs16", text: "请填写正确的答案" },
            questinoType: { text: "简答题", weight: "fw500" },
            questionItem: [],
          },
        ];
        let textarea = [];
        let singleChoice = [];
        let multipleChoice = [];
        for (let item of res) {
          if (item.questionType === "Textarea") {
            textarea.push(item);
          } else {
            item.questionItem = JSON.parse(item.questionItem);
            if (item.questionType === "MultipleChoice")
              multipleChoice.push(item);
            if (item.questionType === "SingleChoice") singleChoice.push(item);
          }
        }
        data[0].questionItem = singleChoice;
        data[1].questionItem = multipleChoice;
        data[2].questionItem = textarea;
        state.questionList = data;
        console.log(data);
      });
    };
    // 传入模板
    return {
      state,
      fnAnswers,
      fnSubmitAnswer,
      fnGetPaperDetail,
    };
  },
  created() {
    if (this.$route.params?.type === "answer") {
      this.state.showType = "answer";
      this.fnGetPaperDetail(this.$route.params.id, this.$route.params.answers);
    }
    if (this.$route.params?.type === "view") {
      this.state.showType = "view";
      this.fnGetPaperDetail(this.$route.params.id, this.$route.params.answers);
    }
  },
  watch: {
    $route(to) {
      // console.log(to);
      if (to.fullPath.indexOf("/paper/answer") > -1) {
        this.state.showType = "answer";
        this.fnGetPaperDetail(
          this.$route.params.id,
          this.$route.params.answers
        );
        return;
      }
      if (to.fullPath.indexOf("/paper/view") > -1) {
        this.state.showType = "view";
        this.fnGetPaperDetail(
          this.$route.params.id,
          this.$route.params.answers
        );
        return;
      }

      this.state.showType = "question";
    },
  },
};
</script>
